<template>
  <div class="mycar">
    <div class="top">
        <van-icon name="arrow-left" class="left" @click="home"/>
        购物车
        <span>编辑</span>
    </div>


    <div class="center" v-for="(v,index) in data" :key="index">
        <div class="left">
            <input type="checkbox" v-model="checkedarr[index]" @click="funx(index)">
            <img :src="v.myimg" alt="">
        </div>
        <div class="right">
            <h6>{{ v.urname }}</h6>
            <p>{{v.text}}</p>
            <span>￥{{v.money}}</span>
            <div class="box">
                <div class="jiajian" @click="fjia(index)">-</div>
                <span>{{math[index]}}</span>
                <div class="jiajian" @click="fjian(index)">+</div>
            </div>
        </div>                                                            
    </div>

    <van-submit-bar :price="money" button-text="去结算"    
    @submit="onSubmit"
    decimal-length="2"
    class="jiesuan"> 
            <van-checkbox v-model="checked" @click="fun2">全选</van-checkbox>
             
    </van-submit-bar>

    <div class="kong"></div>



    <dilan></dilan>
  </div>
</template>

<script>
import dilan from "./HMassembly/HMbottom.vue"
import zzz from "../../mock/data.json"

export default {
    components: {
        dilan,
        zzz
    },
    data() {
        return {
            data: [],
            math: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            checked: 1,
            checkedarr: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            money:0
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/mycar"
        }).then(res => {
            // console.log(res.data);
            this.data = res.data
            res.data.forEach(item => {
                this.money += item.money
                // console.log(item.money);
            })
            this.money=this.money*100
        })
    },
    watch: {
        zzz: {
            handler(ne, old) {
                this.$http({
            url:"http://localhost:3000/mycar"
            }).then(res => {
            // console.log(res.data);
            this.data = res.data
            })
         }
        },
       deep:true
    },
    methods: {
        //单选按钮
        funx(index) {
            let z =this.checkedarr[index]
            z++
            if (z % 2 == 1) {
                this.$set(this.checkedarr, index,1)
            } else if (z % 2 == 0) {
                this.$set(this.checkedarr, index,0)
           }
        },
        //结算
        onSubmit() {
            
        },
        //全选//
        fun2() {
            let p = 1
            p++ 
            if (p % 2 == 1) {
            this.checked=0
           }
        },
        //减号
        fjia(index) {
            let x = this.math[index]
            let qqq =this.data[index].id
            x--
            if (x > 0) {
                this.$set(this.math, index, x)
                this.money-=(this.data[index].money)*100
            } else if (x == 0) {
                this.$http({
                    url: `http://localhost:3000/mycar/${qqq}`,
                    method: "delete",
                }).then(res => {
                    // console.log(qqq);
                })
                this.$http({
                     url:"http://localhost:3000/mycar"
                  }).then(res => {
                    this.data = res.data
                })
           }
        },
        //加号
        fjian(index) {
            let y =this.math[index]
            y++
            this.$set(this.math, index, y)
            this.money+=(this.data[index].money)*100
        },
        home() {
            this.$router.push("/home")
        }
    }
}
</script>

<style lang="scss" scoped>
    .mycar{
        background-color:white;
        width: 100vw;
        .kong{
            height: 32vw;
        }
        .jiesuan{
            position: fixed;
            bottom: 13vw;
            border-bottom: 1px solid #999;
        }
        .center{
            width: 95vw;
            height: 50vw;
            background-color: white;
            border-radius: 1vw;
            margin:2vw auto;
            display: flex;
            .right{
                margin-left: 3vw;
                width: 52vw;
                height: 50vw;
                h6{
                    font-size: 4.8vw;
                    margin: 0;
                    margin-top: 6vw;
                    font-weight: normal;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                p{
                    margin: 0;
                    margin-top: 2vw;
                    font-size: 2vw;
                    color: #333;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                span{
                    display: block;
                    color: red;
                    margin-top: 3vw;
                }
                .box{
                    width: 30vw;
                    height: 12vw;
                    margin-top: 4vw;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    .jiajian{
                        width: 6vw;
                        height: 6vw;
                        border-radius: 50%;
                        text-align: center;
                        border: 1px solid #666;
                        line-height: 6vw;
                    }
                    span{
                        margin: 0;
                    }
                }
            }
            .left{
                width: 40vw;
                height: 50vw;
                display: flex;
                align-items: center;
                input{
                    width: 6vw;
                    height: 30vw;
                }
                img{
                    height: 34vw;
                }
            }
        }
        .top{
            height: 12vw;
            background-color: white;
            line-height: 12vw;
            text-align: center;
            font-weight: 600;
            .left{
                font-size: 8vw;
                vertical-align: middle;
                text-indent: 2vw;
                float: left;
                line-height: 12vw;
            }
            span{
                float: right;
                margin-right: 3vw;
                font-weight: normal;
                font-size: 3.5vw;
            }
        }
    }
</style>